@font-face {
    font-family: "selfFont";
    src:url('../../../../public/Quartz Regular.ttf');
} 

.container {
    height:100%;
    background-color:#001238; 
}
.head-container {
    height:60px;
    line-height:60px;
    text-align: center;
    background-color:#001324;
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-image:url(../../../../public/board/machine-room-bg.png);
    background-size:100% 100%;
}
.head-container-title {
    font-size:2rem;
    font-weight:bold;
    background-image:linear-gradient( to Bottom, #fff, #60d5e7);
    -webkit-text-fill-color:transparent;
    -webkit-background-clip: text;
}
.content-container {
    height:calc( 100% - 60px);
    position:relative;
}
.content-container .content-bg {
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-image:url(../../../../public/board/earth.jpg);
    background-size:cover;
    height:100%;
    opacity: 0.25;
}
.content-container .main-content {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    padding:1rem;
}
.card-wrapper {
    display:inline-block;
    vertical-align: top;
    height:100%;
}
.card-container {
    position:relative;
    height:100%;
    width:100%;
    opacity:1;
    
    /* border:14px solid #fff;
    border-image:url(../../../../public/board/machine-room-box-bg.png) 20 fill repeat; */

    background-color:rgba(0, 0, 0, 0.25);
    background-image:url(../../../../public/board/machine-room-box-bg.png);
    background-size:100% 100%;
    background-position:50% 50%;
    background-repeat: no-repeat;
}
.card-container .symbol {
    position:absolute;
    width:14px;
    height:14px;
    background-image:url(../../../../public/board/machine-room-box-symbol.png);
    background-size:contain;
}
.card-container .top-left {
    left:0;
    top:0;
}
.card-container .top-right {
    right:0;
    top:0;
    transform:rotate(90deg);
}
.card-container .bottom-left {
    left:0;
    bottom:0;
    transform:rotate(-90deg);
}
.card-container .bottom-right {
    right:0;
    bottom:0;
    transform:rotate(180deg);
}
.card-container .card-title {
    height:2.8rem;
    line-height:2.6rem;
    color:#fff;
    padding-left:2.2rem;
    position:relative;
    font-size:1.2rem;
    font-weight:bold;
    background-image:url(../../../../public/board/machine-room-box-title.png);
    background-repeat: no-repeat;
    background-size:contain;
}
.card-container .card-title > span {
    display:inline-block;
    background-image:linear-gradient( to Bottom, #fff, #60d5e7);
    -webkit-text-fill-color:transparent;
    -webkit-background-clip: text;
}
.card-container .card-content {
    height:calc( 100% - 2.8rem);
    padding:0 1rem;
}

.text {
    font-size:1.6rem;
}
.sub-text {
    font-size:0.8rem;
    color:rgba(255, 255, 255, 0.65);
}
/* 自定义Table组件 */
.custom-table {
    width:100%;
    color:#fff;
    border-left:3px solid #1adfff;
    border-bottom:1px solid #002b60;
}
.custom-table thead th {
    /* margin-bottom:1rem; */
    background-color:#001e54;
    border-top:1px solid #002b60;
    border-right:1px solid #002b60;
    color:#00afeb;

}
.custom-table tbody tr {
    height:3rem;
}
.custom-table tbody tr > td {
    text-align: center;
    color:#fff;
    margin-bottom:0.5rem;
    border-top:1px solid #002b60;
    border-right:1px solid #002b60;
}
.custom-table tbody tr > td .bg {
    padding:0.5rem 1rem;
    background-color:#073674;
}
/* Scroll-table 组件 */
.scroll-table {
    height:100%;
    border:2px solid #317b97;
    border-radius:6px;
    padding:1rem;
    /* border-image:linear-gradient(to Right, #317b97, #7ecaee) 1; */
}
.scroll-table .scroll-table-item {
    height:20%;
    width:100%;
    border-bottom:1px solid #517c98;
    padding:0.5rem 1rem;
    color:rgba(255, 255, 255, 0.65);
    display:flex;
    align-items: center;
    background-color:rgba(3, 55, 119, 0.55);
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
/* flex容器 */
.flex-container {
    display:flex;
    height:100%;
    flex-wrap:wrap;
    color:#fff;
    font-size:1rem;
}
.flex-item {
    display:flex;
    align-items: center;
}
.flex-item .flex-item-icon {
    width:60px;
    height:60px;
    background-image:url(../../../../public/board/machine-room-icons-1.png);
    background-size:cover;
    margin-right:1rem;
}
.flex-item .flex-item-content {
    flex:1;
}
.flex-item .flex-item-content .value {
    font-size:1.6rem;
    line-height:1.6rem;
    font-weight:bold;
    color:#29d0ff;
    /* font-family:selfFont; */
}
/* 悬浮Float容器 */
.float-container {
    position:absolute;
    bottom:2rem;
    width:100%;
    left:0;
    display:flex;
    justify-content: space-between;
    padding:0 2rem;
}
.float-container .float-item {
    width:calc(( 100% - 4rem)/3);
    height:80px;
    box-shadow: inset 0 0 10px 4px rgb(72 169 227);
    border:1px solid #008ddd;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:#fff;
}